<template>
	<div class="addCustomer">
		<el-divider content-position="left">
			<el-link type="primary">基本资料</el-link>
		</el-divider>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :disabled="type=='查看'">
			<el-row>
				<el-col :span="12">
					<el-form-item name="商品类型" label-width="140px" :label="computeInputBox('materialType','label')" :prop="computeInputBox('materialType','isInput')" v-if="computeInputBox('materialType','show')">
						<el-select v-model="ruleForm.materialType" placeholder="请选择" :size="size"
							clearable class="lz-el-select" :disabled="computeInputBox('materialType','disabled')">
							<el-option v-for="item in materialTypeList" :key="item.id" :label="item.businessName"
								:value="item.businessNo"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item name="商品编号" label-width="140px" :label="computeInputBox('materialNo','label')" :prop="computeInputBox('materialNo','isInput')" v-if="computeInputBox('materialNo','show')">
						<el-input class="lz-el-input" v-model="ruleForm.materialNo" :disabled="computeInputBox('materialNo','disabled')" :size="size" :maxlength="40"></el-input>
					</el-form-item>
					<el-form-item name="商品规格" label-width="140px" :label="computeInputBox('materialDescription','label')" :prop="computeInputBox('materialDescription','isInput')" v-if="computeInputBox('materialDescription','show')">
						<el-input class="lz-el-input" v-model="ruleForm.materialDescription" :disabled="computeInputBox('materialDescription','disabled')" :size="size" :maxlength="50"></el-input>
					</el-form-item>
					<el-form-item name="商品条码" label-width="140px" :label="computeInputBox('materialBarcode','label')" :prop="computeInputBox('materialBarcode','isInput')" v-if="computeInputBox('materialBarcode','show')">
						<el-input class="lz-el-input" v-model="ruleForm.materialBarcode" :disabled="computeInputBox('materialBarcode','disabled')" :size="size" :maxlength="50"></el-input>
					</el-form-item>
					<el-form-item name="最小包装量(MPQ)" label-width="140px" :label="computeInputBox('miniPackingQuantity','label')" :prop="computeInputBox('miniPackingQuantity','isInput')" v-if="computeInputBox('miniPackingQuantity','show')">
						<el-input-number class="lz-el-input" v-model="ruleForm.miniPackingQuantity" :min="0" :disabled="computeInputBox('miniPackingQuantity','disabled')" :size="size" :maxlength="50" style="width: 100%;" ></el-input-number>
					</el-form-item>
					<el-form-item name="质保天数" label-width="140px" :label="computeInputBox('warrantyDays','label')" :prop="computeInputBox('warrantyDays','isInput')" v-if="computeInputBox('warrantyDays','show')">
						<el-input-number class="lz-el-input" v-model="ruleForm.warrantyDays" :min="0" :max="9999" :disabled="computeInputBox('warrantyDays','disabled')" :size="size" style="width: 100%;" ></el-input-number>
					</el-form-item>
					<el-form-item name="模具编号" label-width="140px" :label="computeInputBox('modelNo','label')" :prop="computeInputBox('modelNo','isInput')" v-if="computeInputBox('modelNo','show')">
						<el-input class="lz-el-input" v-model="ruleForm.modelNo" :disabled="computeInputBox('modelNo','disabled')" :size="size" :maxlength="20"></el-input>
					</el-form-item>
					<el-form-item name="零售价" label-width="140px" :label="computeInputBox('retailPrice','label')" :prop="computeInputBox('retailPrice','isInput')" v-if="computeInputBox('retailPrice','show')">
						<el-input-number class="lz-el-input" v-model="ruleForm.retailPrice" :min="0" :max="99999999" :precision="2" :disabled="computeInputBox('retailPrice','disabled')" :size="size" style="width: 100%;" ></el-input-number>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item name="商品分类" :label="computeInputBox('materialCatalog','label')" :prop="computeInputBox('materialCatalog','isInput')" v-if="computeInputBox('materialCatalog','show')">
						<el-select v-model="ruleForm.materialCatalog" placeholder="请选择" :size="size"
							clearable class="lz-el-select" :disabled="computeInputBox('materialCatalog','disabled')">
							<el-option v-for="item in materialCatalogList" :key="item.id" :label="item.catalogName"
								:value="item.catalogNo"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item name="商品名称" :label="computeInputBox('materialName','label')" :prop="computeInputBox('materialName','isInput')" v-if="computeInputBox('materialName','show')">
						<el-input class="lz-el-input" v-model="ruleForm.materialName" :disabled="computeInputBox('materialName','disabled')" :size="size" :maxlength="50"></el-input>
					</el-form-item>
					<el-form-item name="计量单位" :label="computeInputBox('materialUnit','label')" :prop="computeInputBox('materialUnit','isInput')" v-if="computeInputBox('materialUnit','show')">
						<el-select v-model="ruleForm.materialUnit" placeholder="请选择" :size="size"
							clearable class="lz-el-select" :disabled="computeInputBox('materialUnit','disabled')">
							<el-option v-for="item in materialUnitList" :key="item.id" :label="item.unitName"
								:value="item.unitNo"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item name="净重" :label="computeInputBox('netWeight','label')" :prop="computeInputBox('netWeight','isInput')" v-if="computeInputBox('netWeight','show')">
						<el-input-number class="lz-el-input" v-model="ruleForm.netWeight" :min="0" :max="99999999" :precision="6" :disabled="computeInputBox('netWeight','disabled')" :size="size" style="width: 100%;"></el-input-number>
					</el-form-item>
					<el-form-item name="毛重" :label="computeInputBox('grossWeight','label')" :prop="computeInputBox('grossWeight','isInput')" v-if="computeInputBox('grossWeight','show')">
						<el-input-number class="lz-el-input" v-model="ruleForm.grossWeight" :min="0" :max="99999999" :precision="6" :disabled="computeInputBox('grossWeight','disabled')" :size="size" style="width: 100%;" ></el-input-number>
					</el-form-item>
					<el-form-item name="重量单位" :label="computeInputBox('weightUnit','label')" :prop="computeInputBox('weightUnit','isInput')" v-if="computeInputBox('weightUnit','show')">
						<el-select v-model="ruleForm.weightUnit" placeholder="请选择" :size="size"
							clearable class="lz-el-select" :disabled="computeInputBox('weightUnit','disabled')">
							<el-option v-for="item in weightUnitList" :key="item.id" :label="item.unitName"
								:value="item.unitNo"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item name="体积" :label="computeInputBox('volumn','label')" :prop="computeInputBox('volumn','isInput')" v-if="computeInputBox('volumn','show')">
						<el-input-number class="lz-el-input" v-model="ruleForm.volumn" :min="0" :max="99999999" :precision="2" :disabled="computeInputBox('volumn','disabled')" :size="size" style="width: 100%;" ></el-input-number>
					</el-form-item>
					<el-form-item name="体积单位" :label="computeInputBox('volumnUnit','label')" :prop="computeInputBox('volumnUnit','isInput')" v-if="computeInputBox('volumnUnit','show')">
						<el-select v-model="ruleForm.volumnUnit" placeholder="请选择" :size="size"
							clearable class="lz-el-select" :disabled="computeInputBox('volumnUnit','disabled')">
							<el-option v-for="item in volumnUnitList" :key="item.id" :label="item.unitName"
								:value="item.unitNo"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="16">
					<el-form-item name="备注" label-width="140px" :label="computeInputBox('note','label')" :prop="computeInputBox('note','isInput')" v-if="computeInputBox('note','show')">
						<el-input v-model="ruleForm.note" :disabled="computeInputBox('note','disabled')" :size="size" :maxlength="100"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider content-position="left">
				<el-link type="primary">地点数据</el-link>
			</el-divider>
			<el-row>
				<el-col :span="24">
					<addressList ref="addressList" @updataDataAddressList="updata_data_addressList"></addressList>
				</el-col>
			</el-row>
			<el-divider content-position="left">
				<el-link type="primary">销售数据</el-link>
			</el-divider>
			<el-row>
				<el-col :span="24">
					<saleList ref="saleList" @updataDataAddressList="updata_data_saleList"></saleList>
				</el-col>
			</el-row>
		</el-form>
		<el-divider content-position="left">
			<el-link type="primary">相关资料上传</el-link>
		</el-divider>
		<div class="upload">
			<div class="title">产品图片：</div>
			<fileUpload ref="fileUpload1" @fileUploadData="fileUploadData($event,'产品图片')" ></fileUpload>
		</div>


	</div>
</template>

<script>
	let that
	import {
		mapGetters
	} from 'vuex'
	import fileUpload from '@/components/fileUpload/fileUpload'
	import fileUpload2 from '@/components/fileUpload2/fileUpload'
	import fileUpload3 from '@/components/fileUpload3/fileUpload'
	import lzRowCol from '@/components/lzRowCol/lzRowCol'
	import addressList from './addressList'//地点数据
	import saleList from './saleList'//销售列表
	export default {
		components: {
			lzRowCol,
			fileUpload,
			fileUpload2,
			fileUpload3,
			addressList,
			saleList
		},
		name: 'addCustomer',
		props: {
			type: {
				type: String,
				default: () => {
					return ''
				}
			},
		},
		computed: {
			...mapGetters(['size', 'themeBtColor', 'api','InputBoxList']),
			//计算出当前输入框配置信息
			computeInputBox(){
				return (field,type)=>{
					let arr=this.InputBoxList.find(item=>item.fieldName==field)
					if(arr&&type=='show'){
						return arr.isVisible==0?true:false//0为显示1为隐藏
					}
					if(arr&&type=='isInput'){
						return arr.isInput==0?field:''//0为必填1为不必填
					}
					if(arr&&type=='disabled'){
						return arr.isDisplay==0?true:false//0为只读1为可读写
					}
					if(arr&&type=='label'){
						return arr.fieldLabel//标签动态显示名称
					}
					return false
				}
			}
		},
		data() {
			return {
				isSee:false,//当前是否为查看状态
				companykindList: [{ //公司性质
						value: 1,
						label: '一般纳税人'
					},
					{
						value: 2,
						label: '小规模纳税人'
					},
					{
						value: 3,
						label: '个体户'
					},
					{
						value: 4,
						label: '外币公司'
					},
					{
						value: 5,
						label: '三来一补'
					}
				],
				materialTypeList:[],//商品类型列表
				materialUnitList:[],//单位列表
				volumnUnitList:[],//体积单位列表
				weightUnitList:[],//重量单位
				supplierNoList:[],//供应商编号列表
				materialCatalogList:[],//商品分类列表
				ruleForm: {
					materialNo: '', //商品编号
					materialName: '', //商品名称
					materialCatalog: '', //商品分类
					materialType:'',//商品类型
					materialDescription: '', //商品规格
					materialBarcode:'',//商品条码
					materialUnit: '', //计量单位
					modelNo: '', //模具编号
					note: '', //备注
					netWeight: '', //净重
					grossWeight: '', //毛重
					weightUnit:'',//重量单位
					volumn:'',//体积
					volumnUnit:'',//体积单位
					safeNumber: '', //安全库存
					warrantyDays: '', //质保天数
					productBrand: '', //品牌
					retailPrice:'',//零售价
					miniPackingQuantity: '', //最小包装量(MPQ)
					materialSiteList:[],//地点数据
					materialSaleList:[],//销售列表数据
					//材料上传
					productPicture:'',//产品图片
					
				},
				rules: {
					weightUnit:[{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					materialNo: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					materialName: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					materialBarcode: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					materialCatalog: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					materialType: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					materialDescription: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					materialUnit: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					modelNo: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					note: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					netWeight: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					grossWeight: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					safeNumber: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					warrantyDays: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					productBrand: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					supplierNo: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					miniPackingQuantity: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					miniPurchaseQuantity: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					purchaseDays: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
				}
			}
		},
		mounted() {
			that = this
			//获取类型列表
			that.businessType_list()
			//获取计量单位
			that.unit_list()
			//获取商品分类
			that.materialCatalog_list()
		},
		methods: {
			//获取计量单位
			materialCatalog_list(){
				that.GLOBAL.doGet(that.api.GLOBAL_setting_materialCatalog_list, {}, function(res) {
					if (res.code == 200) {
						that.materialCatalogList=res.result
					}
				});
			},
			//获取计量单位
			unit_list(){
				that.GLOBAL.doGet(that.api.GLOBAL_setting_unit_list, {}, function(res) {
					if (res.code == 200) {
						that.materialUnitList=res.result
						that.volumnUnitList=res.result
						that.weightUnitList=res.result
					}
				});
			},
			//获取类型列表0001为客户类型0002为供应商类型0003采购申请类型0004采购订单类型0005是销售订单类型0006商品类型
			businessType_list(){
				that.GLOBAL.doGet(that.api.GLOBAL_setting_businessType_list, {businessType:'0006'}, function(res) {
					if (res.code == 200) {
						that.materialTypeList=res.result
					}
				});
			},
			//获取到销售数据列表
			updata_data_saleList(data){
				console.log(data);
				that.ruleForm.materialSaleList=data
			},
			//获取到地点数据列表
			updata_data_addressList(data){
				console.log(data);
				that.ruleForm.materialSiteList=data
			},
			//点击查看
			SeeRuleForm(row,text){
				//重置
				that.Reset()
				that.ruleForm=JSON.parse(JSON.stringify(row))
				that.$refs.fileUpload1.seeImage(that.ruleForm.productPicture,text)//产品图片
				that.$refs.addressList.SeeRuleForm(row)
				that.$refs.saleList.SeeRuleForm(row)
			},
			//点击添加弹框确定
			determine() {
				let Catalog=that.materialCatalogList.find(item=>item.catalogNo==that.ruleForm.materialCatalog)
				let Unit=that.materialUnitList.find(item=>item.unitNo==that.ruleForm.materialUnit)
				let volumn=that.volumnUnitList.find(item=>item.unitNo==that.ruleForm.volumnUnit)
				let weight=that.weightUnitList.find(item=>item.unitNo==that.ruleForm.weightUnit)
				that.$refs.ruleForm.validate((valid)=>{
					if (valid) {
						let req = {
							...that.ruleForm,
							materialCatalogName:Catalog&&Catalog.catalogName||"",//商品分类的名称
							materialUnitName:Unit&&Unit.unitName||"",//计量单位名称
							volumnUnitName:volumn&&volumn.unitName||"",//体积单位名称
							weightUnitName:weight&&weight.unitName||"",//重量单位名称
						}
						console.log(req);
						that.GLOBAL.doPost(that.api.GLOBAL_masterdata_material_add, req, function(res) {
							if (res.code == 200) {
								that.$message.success(res.message)
								that.$emit('success',true)
							}
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				})
			},
			//客户编辑
			customer_edit(){
				let Catalog=that.materialCatalogList.find(item=>item.catalogNo==that.ruleForm.materialCatalog)
				let Unit=that.materialUnitList.find(item=>item.unitNo==that.ruleForm.materialUnit)
				let volumn=that.volumnUnitList.find(item=>item.unitNo==that.ruleForm.volumnUnit)
				let weight=that.weightUnitList.find(item=>item.unitNo==that.ruleForm.weightUnit)
				that.$refs.ruleForm.validate((valid)=>{
					if (valid) {
						let req = {
							...that.ruleForm,
							materialCatalogName:Catalog&&Catalog.catalogName||"",//商品分类的名称
							materialUnitName:Unit&&Unit.unitName||"",//计量单位名称
							volumnUnitName:volumn&&volumn.unitName||"",//体积单位名称
							weightUnitName:weight&&weight.unitName||"",//重量单位名称
						}
						that.GLOBAL.doPost(that.api.GLOBAL_masterdata_material_edit, req, function(res) {
							if (res.code == 200) {
								that.$message.success(res.message)
								that.$emit('success',true)
							}
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				})
				
			},
			//附件上传完成
			fileUploadData(data,text) {
				if(data.fileList&&data.fileList.length>0){
					let req={
						url:data.fileList[0].url,
						name:data.fileList[0].name,
						uid:data.fileList[0].uid,
						type:data.fileList[0].raw.type,
						size:data.fileList[0].raw.size,
					}
					if(text=='产品图片'){
						that.ruleForm.productPicture=JSON.stringify(req)
					}
				}else{
					that.ruleForm.productPicture=''
				}
			},
			//重置
			Reset(){
				that.ruleForm={
					materialNo: '', //商品编号
					materialName: '', //商品名称
					materialCatalog: '', //商品分类
					materialType:'',//商品类型
					materialDescription: '', //商品规格
					materialBarcode:'',//商品条码
					materialUnit: '', //计量单位
					modelNo: '', //模具编号
					note: '', //备注
					netWeight: '', //净重
					grossWeight: '', //毛重
					weightUnit:'',//重量单位
					volumn:'',//体积
					volumnUnit:'',//体积单位
					safeNumber: '', //安全库存
					warrantyDays: '', //质保天数
					productBrand: '', //品牌
					retailPrice:'',//零售价
					miniPackingQuantity: '', //最小包装量(MPQ)
					materialSiteList:[],//地点数据
					materialSaleList:[],//销售列表数据
					//材料上传
					productPicture:'',//产品图片
					
				}
				that.$nextTick(()=>{
					that.$refs.ruleForm.resetFields();
					that.$refs.addressList.Reset()
					that.$refs.saleList.Reset()
				})
				
			}
		}

	}
</script>

<style lang="scss" scoped>
	.addCustomer {
		.upload {
			display: flex;
			width: 100%;
			margin-bottom: 20px;
			box-sizing: border-box;
			.title {
				font-size: 14px;
				padding: 0 5px;
				padding: 5px;
				width: 100px;
			}
		}
	}
</style>
